<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./js/jquery-2.1.1.min.js"></script>
    </head>
    <style>
        li{
            line-height: 30px;
        }
        label{
            display:inline-block;
            width : 100px;
        }
    </style>
    <body>
        <div>
            <ul>
                <li>
                    <label for="">姓名：</label>
                    <input type="text" id="user" placeholder="姓名" /> 
                </li>
                <li>
                    <label for="">银行名称：</label>
                    <input type="text" id="bankname" placeholder="银行名称" /> 
                </li>
                <li>
                    <label for="">账单日：</label>
                    <input type="text" id="billdate" placeholder="3" /> 
                </li>
                <li>
                    <label for="">还款日：</label>
                    <input type="text" id="duedate" placeholder="15" />
                </li>
                <li>
                    <input type="button" id="add" name="" value="提交">
                </li>
            </ul>
        </div>
    </body>

    <script>

        var origin = window.location.origin;

        $('#add').on('click',()=>{
            var sName = $('#user').val();
            var sBankname = $('#bankname').val();
            var sBillData = $('#billdate').val();
            var sDueData = $('#duedate').val();

            if(sName && sBankname && sBillData && sDueData){
                $.ajax({
                    url : origin + '/add',
                    type : 'post',
                    data : {
                        user : sName,
                        bankname : sBankname,
                        billdata : sBillData,
                        duedata : sDueData
                    },
                    success : (err,result)=>{
                        document.write('添加成功');
                    },
                    error : (result)=>{
                        document.write('添加失败');
                    }
                });
            }
        });
    </script>
</html>